<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>javascript 阶段</title>
    <style>
        body {
            margin: 0;
        }
        .footer {
            width: 100%;
            height: 100px;
            background-color: #f0f0f0;
            position: fixed;
            bottom: 0;
            left: 0;
            z-index: 1000;
        }
        .footer .container {
            width: 1200px;
            padding: 0 15px;
            margin: 0 auto;
            background-color: deepskyblue;
        }

        .music-box {
            width: 120px;
            height: 100px;
            background-color: #f50;
            border: 5px solid #ccc;
            box-sizing: border-box;
            cursor: pointer;
            position: relative;
        }
        .music-box .icon {
            display: block;
            width: 40px;
            height: 40px;
            position: absolute;
            right: 5px;
            top: 30px;
            background-size: 40px 40px;
        }
        .music-box .icon-right {
            background-image: url(./icon/右三角形.png);
        }
        .music-box .icon-left {
            background-image: url(./icon/左三角形.png);
        }
    </style>
</head>
<body>
    <!-- 结构 -->
    <!-- 外观 -->

    <footer class="footer">
        <div class="container">
            <!-- 音乐盒子 -->
            <div class="music-box">
                <!-- 箭头标签 -->
                <span class="icon icon-right"></span>
            </div>
        </div>
    </footer>


    <!-- 动画函数 -->
    <script src="./tool/animateV3.0.0.js"></script>
    <script>
        // 要求:
            // 音乐盒子的开关逻辑

        // 编码:
            // 1.0 获取页面的相关元素
            var musicBox = document.querySelector(".music-box");
            var iconArrow = document.querySelector(".music-box .icon");
            // 2.0 布尔值 作用是做开关
            var isOpen = true;
            // 3.0 事件绑定
            musicBox.onclick = function(){
                // 判断一下
                

                if(isOpen){
                    // 改变盒子的宽度为900 , this是事件的调用者
                    // animate(musicBox,)
                    animate(this,"width",900,function(){
                        // 改变箭头的方向
                        iconArrow.className = "icon icon-left";
                        musicBox.style["background"] = "green";
                        // isOpen = false ;
                    })
                }else {
                    // 改变盒子的宽度为900 , this是事件的调用者
                    // animate(musicBox,)
                    animate(this,"width",120,function(){
                        // 改变箭头的方向
                        iconArrow.className = "icon icon-right";
                        // this.style["background"] = "green";
                        musicBox.style["background"] = "blue";
                    })
                }
                // 取反(赋值时可以切换false/true)
                isOpen =!isOpen;
            }


    </script>
</body>
</html>